<template>
  <refresh-list
    ref="refreshList"
    :enable-pull-refresh="false"
    @pull-load="onListLoad"
  > 
    <template v-if="bangumis.length">
      <film-item
        class="sm-unit"
        v-for="sm in bangumis"
        :key="sm.media_id"
        :title="sm.title"
        :cover-path="sm.cover"
        :type-name="sm.season_type_name"
        :all-params="sm"
      />
      <van-divider class="divider">
        <span @click="switchSearchType('bangumi')">查看更多番剧 <i class="fa fa-dropright"></i></span>
      </van-divider>
    </template>
    <template v-if="movies.length">
      <film-item
        class="movies-unit"
        v-for="sm in movies"
        :key="sm.media_id"
        :title="sm.title"
        :area="sm.areas"
        :actor="sm.cv"
        :staff="sm.staff"
        :cover-path="sm.cover"
        :type-name="sm.season_type_name"
        :all-params="sm"
      />
      <van-divider class="divider">
        <span @click="switchSearchType('movies')">查看更多影视 <i class="fa fa-dropright"></i></span>
      </van-divider>
    </template>
    <template v-if="videos">
      <video-item
        class="video-unit"
        v-for="item in videos"
        :key="item.aid"
        :aid="item.aid"
        :bvid="item.bvid"
        :author="item.author"
        :title="item.title"
        :coverPath="item.pic"
        :view="item.play"
        :danmaku="item.video_review"
        :duration="item.duration"
        :allParams="item"
        layout="ltr"
      />
    </template>
  </refresh-list>
</template>

<script>
import {
  Divider as VanDivider
} from 'vant'
import FilmItem from '@/components/film-item/FilmItem'
import SearchResultAllByBase from './SearchResultAllByBase'
import { apiGetSearchResult } from '@/api/search'
export default {
  name: 'SearchResultAllByDefault',
  extends: SearchResultAllByBase,
  inject: ['setSearchTypeNum', 'switchSearchType'],
  components: {
    FilmItem,
    VanDivider
  },
  data () {
    return {
      result: null,
      allData: null
    }
  },
  computed: {
    bangumis () {
      if (this.result !== null) {
        const seriesObj = this.result.find(item => item.result_type === 'media_bangumi')
        return seriesObj ? seriesObj.data : []
      } else {
        return []
      }
    },
    movies () {
      if (this.result !== null) {
        const moviesObj = this.result.find(item => item.result_type === 'media_ft')
        return moviesObj ? moviesObj.data : []
      } else {
        return []
      }
    }
  },
  watch: {
    keyword (newVal) {
      if (newVal) {
        this.allData = null
      }
    },
    allData: {
      deep: true,
      handler (newVal) {
        if (newVal) {
          this.setSearchTypeNum(newVal)
        }
      }
    }
  },
  methods: {
    switchTab (tab) {
      this.$emit('switch-tab', tab)
    },
    getData ({ url = '/search/getResult', data = {} } = {}) {
      const p = Object.assign({}, {
        keyword: this.keyword,
        page: this.currentPage,
        pagesize: this.pageSize
      }, data)
      apiGetSearchResult({ url, data: p }).then(res => {
        const { data, code } = res
        if (code === 0 && data !== null) {
          const { result, numPages, page } = data
          this.currentPage = page
          this.totalPage = numPages
          this.allData = data
          if (numPages === 0) {
            this.$refs.refreshList.completeLoad()
          } else {
            const videosObj = result.find(item => item.result_type === 'video')
            if (videosObj) {
              this.videos.push(...videosObj.data)
            }
            this.result = result
          }
          if (this.currentPage === this.totalPage) {
            this.$refs.refreshList.completeLoad()
          }
        } else {
          this.$refs.refreshList.completeLoad()
        }
      }).catch(err => {
        console.log(err)
        this.$refs.refreshList.showError()
      }).finally(() => {
        this.$refs.refreshList.stopLoad()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .divider{
    margin: 10px 0;
    border-color: #ccc;
  }
</style>
